{% extends 'migration_app/dashboard_base.html' %}

{% block title %}数据库信息 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block page_title %}数据库信息{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">数据库信息</li>
{% endblock %}

{% block dashboard_content %}
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-database me-1"></i> 数据库连接信息
            </div>
            <div class="card-body">
                <form id="db-connection-form" method="post" class="needs-validation" novalidate>
                    {% csrf_token %}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5 class="mb-3">源数据库 (Oracle)</h5>
                            <div class="mb-3">
                                <label for="oracle_host" class="form-label">主机地址</label>
                                <input type="text" class="form-control" id="oracle_host" name="oracle_host" placeholder="例如: 192.168.1.100" required>
                                <div class="invalid-feedback">请输入主机地址</div>
                            </div>
                            <div class="mb-3">
                                <label for="oracle_port" class="form-label">端口</label>
                                <input type="number" class="form-control" id="oracle_port" name="oracle_port" value="1521" required>
                                <div class="invalid-feedback">请输入有效的端口号</div>
                            </div>
                            <div class="mb-3">
                                <label for="oracle_service_name" class="form-label">服务名</label>
                                <input type="text" class="form-control" id="oracle_service_name" name="oracle_service_name" placeholder="例如: ORCL" required>
                                <div class="invalid-feedback">请输入Oracle服务名</div>
                            </div>
                            <div class="mb-3">
                                <label for="oracle_username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="oracle_username" name="oracle_username" required>
                                <div class="invalid-feedback">请输入用户名</div>
                            </div>
                            <div class="mb-3">
                                <label for="oracle_password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="oracle_password" name="oracle_password" required>
                                <div class="invalid-feedback">请输入密码</div>
                            </div>
                            <div class="d-grid">
                                <button type="button" class="btn btn-primary" id="test-oracle-btn">
                                    <i class="fas fa-plug me-1"></i> 测试Oracle连接
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-3">目标数据库 (PolarDB-PostgreSQL)</h5>
                            <div class="mb-3">
                                <label for="pg_host" class="form-label">主机地址</label>
                                <input type="text" class="form-control" id="pg_host" name="pg_host" placeholder="例如: 192.168.1.101" required>
                                <div class="invalid-feedback">请输入主机地址</div>
                            </div>
                            <div class="mb-3">
                                <label for="pg_port" class="form-label">端口</label>
                                <input type="number" class="form-control" id="pg_port" name="pg_port" value="5432" required>
                                <div class="invalid-feedback">请输入有效的端口号</div>
                            </div>
                            <div class="mb-3">
                                <label for="pg_database" class="form-label">数据库名</label>
                                <input type="text" class="form-control" id="pg_database" name="pg_database" required>
                                <div class="invalid-feedback">请输入数据库名</div>
                            </div>
                            <div class="mb-3">
                                <label for="pg_username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="pg_username" name="pg_username" required>
                                <div class="invalid-feedback">请输入用户名</div>
                            </div>
                            <div class="mb-3">
                                <label for="pg_password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="pg_password" name="pg_password" required>
                                <div class="invalid-feedback">请输入密码</div>
                            </div>
                            <div class="d-grid">
                                <button type="button" class="btn btn-primary" id="test-pg-btn">
                                    <i class="fas fa-plug me-1"></i> 测试PostgreSQL连接
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-save me-1"></i> 保存连接信息
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-info-circle me-1"></i> 连接配置说明
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h5><i class="fas fa-lightbulb me-1"></i> 提示</h5>
                    <p>数据库连接信息用于配置迁移任务的源数据库和目标数据库。请确保输入正确的连接参数，并保持数据库服务的可用性。</p>
                </div>
                <h6 class="fw-bold">Oracle 数据库</h6>
                <ul>
                    <li>确保Oracle客户端已正确安装</li>
                    <li>服务名即Oracle的SID或服务名</li>
                    <li>请确保用户拥有足够的权限读取要迁移的数据</li>
                </ul>
                <h6 class="fw-bold">PolarDB-PostgreSQL</h6>
                <ul>
                    <li>确保已创建目标数据库</li>
                    <li>用户需要具有创建表、索引等结构的权限</li>
                    <li>建议为迁移工作创建专用用户和数据库</li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <i class="fas fa-history me-1"></i> 连接记录
            </div>
            <div class="card-body">
                <div id="connection-status">
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <span class="badge bg-secondary">Oracle</span>
                        </div>
                        <div>
                            <span class="text-muted">未测试连接</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <span class="badge bg-secondary">PostgreSQL</span>
                        </div>
                        <div>
                            <span class="text-muted">未测试连接</span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="text-center">
                    <button type="button" class="btn btn-outline-primary" id="load-saved-btn">
                        <i class="fas fa-sync me-1"></i> 加载已保存连接
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 表单验证
    (function() {
        'use strict';
        
        document.addEventListener('DOMContentLoaded', function() {
            const forms = document.querySelectorAll('.needs-validation');
            
            Array.prototype.slice.call(forms).forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
            
            // 测试Oracle连接
            document.getElementById('test-oracle-btn').addEventListener('click', function() {
                const host = document.getElementById('oracle_host').value;
                const port = document.getElementById('oracle_port').value;
                const service = document.getElementById('oracle_service_name').value;
                const username = document.getElementById('oracle_username').value;
                const password = document.getElementById('oracle_password').value;
                
                if (!host || !port || !service || !username || !password) {
                    alert('请填写完整的Oracle连接信息');
                    return;
                }
                
                // 模拟连接测试
                const connectionDiv = document.getElementById('connection-status').firstElementChild;
                connectionDiv.innerHTML = `
                    <div class="me-3">
                        <span class="badge bg-warning">Oracle</span>
                    </div>
                    <div>
                        <span class="text-warning">正在连接...</span>
                    </div>
                `;
                
                // 这里应该有一个实际的AJAX请求来测试连接
                setTimeout(function() {
                    // 模拟连接成功
                    connectionDiv.innerHTML = `
                        <div class="me-3">
                            <span class="badge bg-success">Oracle</span>
                        </div>
                        <div>
                            <span class="text-success">连接成功</span>
                        </div>
                    `;
                }, 1500);
            });
            
            // 测试PostgreSQL连接
            document.getElementById('test-pg-btn').addEventListener('click', function() {
                const host = document.getElementById('pg_host').value;
                const port = document.getElementById('pg_port').value;
                const database = document.getElementById('pg_database').value;
                const username = document.getElementById('pg_username').value;
                const password = document.getElementById('pg_password').value;
                
                if (!host || !port || !database || !username || !password) {
                    alert('请填写完整的PostgreSQL连接信息');
                    return;
                }
                
                // 模拟连接测试
                const connectionDiv = document.getElementById('connection-status').lastElementChild;
                connectionDiv.innerHTML = `
                    <div class="me-3">
                        <span class="badge bg-warning">PostgreSQL</span>
                    </div>
                    <div>
                        <span class="text-warning">正在连接...</span>
                    </div>
                `;
                
                // 这里应该有一个实际的AJAX请求来测试连接
                setTimeout(function() {
                    // 模拟连接成功
                    connectionDiv.innerHTML = `
                        <div class="me-3">
                            <span class="badge bg-success">PostgreSQL</span>
                        </div>
                        <div>
                            <span class="text-success">连接成功</span>
                        </div>
                    `;
                }, 1500);
            });
            
            // 加载已保存的连接信息
            document.getElementById('load-saved-btn').addEventListener('click', function() {
                // 模拟加载保存的连接信息
                // 实际应用中应该从服务器获取保存的连接信息
                alert('正在加载已保存的连接信息...');
            });
        });
    })();
</script>
{% endblock %} 